<!--    周期-->
<template>
    <div>
        <a-row type="flex" justify="space-between" class="mb-1 mr-p5">
            <a-space>
                <date-packer placeholder="开始日期" v-model="dataReq.create_time_start" :is-today="true"/>
                <date-packer placeholder="结束日期" v-model="dataReq.create_time_end"/>
                <loading-button msg="搜索" @confirm="getData"/>
            </a-space>

            <a-space class="g-black-bold">
                <span>ETH/USDT永续</span>
                <span class="g-red">{{ dataReq.CandlestickInterval }} 级别</span>
                <span>盈亏:</span>
                <span class="g-red g-font-bold-big">{{ profit }}</span>
            </a-space>
        </a-row>


        <a-table
                bordered
                :loading="loading"
                :columns="columns"
                :data-source="tableData.list"
                :pagination="paginationConfig(tableData)"
                :scroll="{ y: 'calc(100vh - 245px)' }"
                rowKey="id"
                @change="getData">

            <template #status="{ text }">
                <a-tag color="#28a745" v-if="text===1">金叉</a-tag>
                <a-tag color="#dc3545" v-if="text===2">死叉</a-tag>
            </template>


            <template #rsi1="{ record }">
                (<span class="k_color">{{ record.k }}</span> , <span class="d_color">{{ record.d }}</span>)
            </template>

            <template #rsi2="{ record }">
                (<span class="k_color">{{ record.p_k }}</span> , <span class="d_color">{{ record.p_d }}</span>)
            </template>

            <template #active="{ record }">
                <span v-if="record.status===1">开多</span>
                <span v-if="record.status===2">开空</span>
            </template>

            <template #wave="{ record }">
                <span v-if="record.close_high">
                   (<span class="k_color">{{ record.close_high }}</span> , <span class="d_color">{{ record.close_low }}</span>)
                </span>
            </template>

            <template #wave_profit="{ text }">
                <span class="k_color">{{ text }}</span>
            </template>

            <template #wave_loss="{ text }">
                <span class="d_color">{{ text }}</span>
            </template>

        </a-table>
    </div>

</template>

<script>
    import paginationConfig from "@/assets/styles/ant";
    import {queryEthRsi, queryProfit} from "@/assets/api/api";
    import DatePacker from "@/components/DatePacker";
    import LoadingButton from "@/components/LoadingButton";

    const columns = [
        {title: '创建时间', dataIndex: 'create_time', width: 150},
        // {title: '时间-1', dataIndex: 'time', width: 150},
        {title: 'StochRsi-1', width: 150, slots: {customRender: 'rsi1'}},
        // {title: '时间-2', dataIndex: 'p_time', width: 150},
        {title: 'StochRsi-2', width: 150, slots: {customRender: 'rsi2'}},
        {title: '状态', width: 100, dataIndex: 'status', slots: {customRender: 'status'}, align: 'center'},
        {title: '开仓价格', dataIndex: 'usdt', width: 100},
        {title: '操作', width: 100, slots: {customRender: 'active'}, align: 'center'},
        {title: '平仓时间', dataIndex: 'close_time', width: 150},
        {title: '平仓价格', dataIndex: 'close_usdt', width: 100},
        {title: '震荡',width: 150, slots: {customRender: 'wave'}},
        {title: '震荡可盈',width: 100, dataIndex: 'wave_profit',slots: {customRender: 'wave_profit'}},
        {title: '震荡可亏',width: 100, dataIndex: 'wave_loss',slots: {customRender: 'wave_loss'}},
        {title: '平仓盈亏', dataIndex: 'close_profit', width: 100}
    ];


    class dataReq {
        CandlestickInterval;
        create_time_start
        create_time_end
        pagerIndex = 1
        pagerNum = 50
    }

    export default {
        name: "Period",
        components: {LoadingButton, DatePacker},
        data() {
            return {
                columns,
                loading: false,
                dataReq: new dataReq(),
                tableData: {},
                profit:0,
            }
        },
        methods: {
            paginationConfig,
            getData(p) {
                this.dataReq.pagerIndex = p ? p.current : 1;
                this.dataReq.pagerNum = p ? p.pageSize : this.dataReq.pagerNum;

                this.loading = true;
                this.$post(queryEthRsi, this.dataReq).then(value => {
                    this.loading = false;
                    if (value.code === 200) {
                        this.tableData = value.data;
                    }
                });

                this.$post(queryProfit, this.dataReq).then(value => {
                    if (value.code === 200) {
                        this.profit = value.data.profit;
                    }
                })
            }
        },
        mounted() {
            this.dataReq.CandlestickInterval = this.$route.params.cycle;
            this.getData();
        }
    }
</script>

<style scoped>

    .k_color {
        color: rgb(0, 0, 255);
    }

    .d_color {
        color: rgb(255, 0, 0);;
    }


</style>